import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import TextField from "@material-ui/core/TextField";
import Select from "@material-ui/core/Select";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Switch from "@material-ui/core/Switch";
// import { DropzoneArea } from 'material-ui-dropzone';
import { FormDatePicker, FormTimePicker, MuiPickersUtilsProvider, DateFnsUtils } from "../components/DatePicker";

import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";
import Divider from "@material-ui/core/Divider";

import { useLocation, useParams } from "react-router-dom";

import useService from "../service/useService";

import {useBreadcrumbsContext} from "../contexts/BreadcrumbsContext"


import GridForm from "../components/GridForm"



const useStyles = makeStyles((theme) => ({
	root: {
		flexGrow: 1,
	},
	paper: {
		padding: theme.spacing(2),
		textAlign: "center",
		color: theme.palette.text.secondary,
	},
}));

export default function Project(props) {
	const classes = useStyles();
	var { id } = useParams();

	var [project, setProject] = React.useState({});
	const {setBreadcrumbs} = useBreadcrumbsContext();


	useService(async (service) => {
		var p = await service.projects.get(id);
		console.log("project:", p);
		setProject(p.Data);
		setBreadcrumbs([{to:'/project',title:"项目"},{title:p.Data.Name}])
	});
	function handleChange(name,e){
		var np = {...project}
		np[name]=e.target.value
		setProject(np)
		console.log("new project:" ,np)
	}
	var fields = [
		{name:"hello",label:"field1",value:"xx"},
		{type:"date",name:"date",label:"date"},
		{type:"time",name:"time",label:"time",xs:3},
		{type:"number",name:"number",label:"number",xs:3},
		{type:"text",multiline:true,rowsMax:4,name:"text",label:"text",xs:3},
		{type:"select",name:"text",label:"text",xs:3,value:"1" , options:[{value:"1" , label:"hello"}]},
		{type:"radio",name:"radio",label:"radio",xs:3,value:"1" , options:[{value:"1" , label:"hello"},{label:"haha",value:"2"}]},
		{type:"checkbox",name:"checkbox",label:"checkbox",xs:3 , options:[{value:true , label:"hello" , name:'v1'},{value:false , label:"haha",name:"v2"}]},
		{type:"switch",name:"switch",label:"switch",xs:3},
		{type:"file",name:"file",label:"file",xs:3},

	]

	return (
		<>
		<GridForm fields={fields}></GridForm>
		<MuiPickersUtilsProvider utils={DateFnsUtils}>
			<div className={classes.root}>
				<Grid container spacing={3}>
					<Grid item xs={12}>
						<TextField margin="dense" id="name_1" name="name" label="项目名称" onChange={handleChange.bind(this,"Name")} value={project.Name} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<FormDatePicker margin="dense" name="bidDate" label="招标日期" value={project.BidDate} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<FormDatePicker margin="dense" name="projectAddr" label="竣工日期" value={project.completionDate} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<TextField margin="dense" name="mananger" label="负责人" value={project.Manager || ""} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<TextField margin="dense" name="mangerPhone" label="负责人电话" value={project.ManagerPhone || ""} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<TextField margin="dense" name="projectType" label="项目类型" value={project.ProjectType || ""} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<TextField margin="dense" name="mapCenter" label="地图中心" value={project.MapCenter || ""} fullWidth />
					</Grid>
					<Grid item xs={6}>
						<TextField margin="dense" name="projectAddr" label="项目地址" value={project.ProjectAddr || ""} fullWidth />
					</Grid>
					<Grid item xs={3}>
						<TextField margin="dense" name="stuffNum" label="人员规模" value={project.StaffNum || ""} fullWidth />
					</Grid>
					<Grid item xs={6}>
						<TextField margin="dense" name="remark" label="备注" multiline rowsMax={4} value={project.Remark || ""} fullWidth />
					</Grid>
				</Grid>
				<h3>绘图元素</h3>
				<Grid container >
					<Grid item xs={2}>
						<List component="nav" aria-label="Graph element folders">
							<ListItem button>
								<ListItemIcon>
									<InboxIcon />
								</ListItemIcon>
								<ListItemText primary="节点" />
							</ListItem>
							<ListItem button>
								<ListItemIcon>
									<DraftsIcon />
								</ListItemIcon>
								<ListItemText primary="连线" />
							</ListItem>
							<ListItem button>
								<ListItemIcon>
									<DraftsIcon />
								</ListItemIcon>
								<ListItemText primary="注释" />
							</ListItem>
						</List>
					</Grid>
				</Grid>
				<h3>设计图</h3>
				<div id="graphroot">
					这里是设计图
				</div>

			</div>
		</MuiPickersUtilsProvider>
		</>
	);
}
